<script lang="ts" setup>
import type { BoolType, ColumnType, MetaType } from 'nocodb-sdk'

interface Props {
  column: ColumnType
  modelValue: any
  bold?: BoolType
  italic?: BoolType
  underline?: BoolType
  meta?: MetaType
  showTooltip?: boolean
}

const props = defineProps<Props>()

const _meta = inject(MetaInj, ref())

const meta = computed(() => props.meta || _meta.value)

const { t } = useI18n()

const { metas } = useMetas()

const column = toRef(props, 'column')

const baseStore = useBase()

const basesStore = useBases()

const { basesUser } = storeToRefs(basesStore)

const { isXcdbBase, isMysql } = useBase()

const sqlUi = computed(() => baseStore.getSqlUiBySourceId(column.value?.source_id))

const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))

const parsedValue = computed(() => {
  if (!meta?.value) return ''

  return parsePlainCellValue(props.modelValue, {
    col: column.value,
    abstractType: abstractType.value,
    meta: meta.value,
    metas: metas.value,
    baseUsers: basesUser.value,
    isMysql,
    isXcdbBase,
    t,
  })
})
</script>

<template>
  <NcTooltip v-if="showTooltip" class="truncate" show-on-truncate-only>
    <template #title>
      {{ parsedValue }}
    </template>

    <span
      class="plain-cell before:px-1"
      :class="{
        '!font-bold': bold,
        '!italic': italic,
        'underline': underline,
      }"
      data-testid="nc-plain-cell"
    >
      {{ parsedValue }}
    </span>
  </NcTooltip>
  <span
    v-else
    class="plain-cell before:px-1"
    :class="{
      '!font-bold': bold,
      '!italic': italic,
      'underline': underline,
    }"
    data-testid="nc-plain-cell"
  >
    {{ parsedValue }}
  </span>
</template>

<style lang="scss" scoped>
.plain-cell {
  font-synthesis: initial !important;
  &::before {
    content: '•';
    padding: 0 4px;
    display: inline-block;
    text-decoration: none !important;
  }
  &:first-child::before {
    content: '';
    padding: 0;
  }
  &:first-child {
    padding-left: 0;
  }
}
</style>
